<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div>
        <div class="box">
            <el-card class="card">
                <el-row class="card-row">
                    <el-col :span="user.role == 3 ? 8 : 12">
                        <el-card shadow="hover" class="box-card centered-card red">
                            <div>
                                注册时间
                                <el-tag type="success">
                                    {{ formatDate(user.createTime) }}
                                </el-tag>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="user.role == 3 ? 8 : 12">
                        <el-card shadow="hover" class="box-card centered-card blue">
                            <div>
                                账号状态
                                <el-tag :type="user.status == 1 ? 'success' : 'danger'">
                                    {{ user.status == 1 ? "正常" : "注销" }}
                                </el-tag>
                            </div>
                        </el-card>
                    </el-col>
                 
                </el-row>
            </el-card>
            <el-card class="form">
                <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" style="margin-top:50px;">
                    <el-form-item label="用户昵称" prop="name">
                        <el-input v-model="form.name" style="width: 800px;" @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="用户姓名" prop="name">
                        <el-input v-model="form.username" style="width: 800px;" @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="telephone">
                        <el-input v-model="form.telephone" style="width: 800px;" @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="用户邮箱" prop="email">
                        <el-input v-model="form.email" style="width: 800px;" @input="form.update = 1"></el-input>
                    </el-form-item>
                    <el-form-item label="用户年龄" prop="age">
                        <el-input-number v-model="form.age" :min="18" :max="50" style="width: 800px;"
                            @input="form.update = 1"></el-input-number>
                    </el-form-item>
                    <el-form-item label="用户性别" prop="sex">
                        <el-select v-model="form.sex" placeholder="请选择性别" style="width: 800px;"
                            @change="form.update = 1">
                            <el-option v-for="item in sexData" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-if="form.update == 1" @click="doMod"
                            style="width: 800px;">保存修改</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>

    </div>
</template>
<script setup>

import { ref, reactive, onMounted, onBeforeUnmount} from 'vue'
import mitting from '@/assets/mitting'
import { ElMessage } from 'element-plus'
import api from '@/axios/index'
// 用户信息
let user = JSON.parse(localStorage.getItem('CurUser'))

// 表单数据
let form = reactive({
    name: "",
    username: "",
    telephone: "",
    email: "",
    sex: 1,
    age: 18,
    update: 0
})

// 性别选项
const sexData = [
    { id: 0, name: '女' },
    { id: 1, name: '男' }
]

// 校验规则
const rules = {
    name: [
        { required: true, message: '请输入用户账号/昵称', trigger: 'blur' },
        { min: 3, max: 20, message: '3-20个字符', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入用户姓名', trigger: 'blur' },
        { min: 2, max: 6, message: '2-6个字符', trigger: 'blur' }
    ],
    telephone: [
        { required: true, message: '请输入用户手机号', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' },
        {
            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
        }
    ],
    age: [{ required: true, message: '请输入年龄', trigger: 'change' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    email: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
    ]
}

// 获取表单引用
const formRef = ref(null)

// 格式化日期
function formatDate(dateStr) {
    if (!dateStr) return null
    const date = new Date(dateStr)
    return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
}

function init() {
    getUserById()

}
function getUserById() {
    api
        .get("/user/info/" + user.id)
        .then((res) => {
            user = res.data;
            Object.assign(form, user)
        });

}
function doMod() {
    formRef.value.validate((valid) => {
        if (valid) {
            api.post("/user/update", form).then((res) => {
                if (res.code == 200) {
                    ElMessage({
                        message: "修改成功",
                        type: "success",
                    });
                    form.update = 0
                    getUserById()
                    mitting.emit('update-user')
                    //   $EventBus.$emit("update-user");
                } else {
                    ElMessage({
                        message: res.msg,
                    })
                }
            })
        } else {
            ElMessage({
                message: "请填写正确数据",
                type: "error",
            });
        }
    });
}

// 定时刷新数据
let timer = null

onMounted(() => {
    Object.assign(form, user)
    init()
    timer = setInterval(() => {
        if (form.update === 0) {
            init()
        }
    }, 1000)
})

onBeforeUnmount(() => {
    if (timer) clearInterval(timer)
})
</script>

<style scoped>
.box {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 40px 20px;
  background-color: #f5f7fa;
}

.card {
  background-color: #176ed1;
  color: white;
  margin-bottom: 20px;
  width: 100%;
  max-width: 1200px;
}

.card-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.box-card {
  margin: 10px;
  border-radius: 10px;
}

.form {
  background-color: #ffffff;
  padding: 40px;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* Element Plus 表单样式微调 */
.el-form-item__label {
  font-weight: bold;
}

.el-button {
  margin-top: 20px;
}
</style>